<template>
	<base-page ref="basePage" @submit="handleSubmit">
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">components组件</text>
			<com-cell
			v-for="(item, index) in componentForm"
			:key="index"
			:title="'组件' + (index+1) + ' - ' + component[item.name].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditComponent(item, index)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseComponent($event, index)"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddComponent">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加组件</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">cell单元格</text>
			<com-cell
			v-if="cellForm && (cellForm.dynamicData || cellForm.staticData || cellForm.style)"
			:title="cell[cellForm.style.cellName || 'h-cell'].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditCell(cellForm)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseCell"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddCell" v-else>
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加单元格</text>
			</view>
		</view>
	</base-page>
</template>

<script>
	import BasePage from './base.vue'
	import FormHeader from '../components/Header.vue'
	import { Component, Cell } from '@/assets/js/interface.js'
	export default {
		components: { BasePage, FormHeader },
		inject: ['getSkinColor', 'getQuery', 'selectOptions', 'selectIcon', 'Router'],
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.query.type || ''
			},
			component () {
				return Component
			},
			cell () {
				return Cell
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				componentForm: [],
				cellForm: {}
			}
		},
		created() {
			if ( this.originForm ) {
				this.componentForm = this.originForm.components || []
				this.cellForm = this.originForm.cell || {}
			}
		},
		methods: {
			onShow () {
				uni.$off('componentSelect')
				uni.$off('cellSelect')
			},
			handleAddComponent () {
				if ( this.disabled ) return
				const component = Object.assign({}, this.component, {'sub-card': {'label': '分段卡片'}})
				const keys = Object.keys(component)
				this.selectOptions({
					title: '需要添加什么类型的组件',
					actions: keys.map(key => component[key].label),
					success: res => {
						const index = keys.findIndex(key => component[key].label == res.detail.label)
						const key = keys[index]
						uni.$once('componentSelect', data => {
							this.componentForm.push(data)
						})
						this.Router.push({path: '/pages/program/form/comp/index', query: {type: key}})
					}
				})
			},
			handleEditComponent (item, index) {
				uni.$once('componentSelect', data => {
					this.$set(this.componentForm, index, data)
				})
				this.Router.push({path: '/pages/program/form/comp/index', query: {type: item.name, form: item, disabled: this.disabled}})
			},
			handleCloseComponent (e, index) {
				 e.stopPropagation && e.stopPropagation()
				 this.componentForm.splice(index, 1)
			},
			handleAddCell () {
				if ( this.disabled ) return
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell'})
			},
			handleEditCell (item) {
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell', query: {form: item, disabled: this.disabled}})
			},
			handleCloseCell (e) {
				 e.stopPropagation && e.stopPropagation()
				 this.cellForm = {}
			},
			handleSubmit (form) {
				this.$emit('submit', Object.assign({}, form, {components: this.componentForm, cell: this.cellForm}))
			}
		}
	}
</script>

<style>

</style>